<template>
  <div class="ai__ppt_loading" :class="[`ai__ppt_loading--${size}`]">
    <svg-icon icon-class="ai-ppt-loading" class="loading__svg"></svg-icon>
    <p class="loading__text">{{ text }}</p>
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    size: {
      type: String,
      default: 'default'
    },
    text: {
      type: String,
      default: '您的大纲正在生成中...'
    }
  }
}
</script>

<style lang="scss" scoped>
.ai__ppt_loading {
  width: 100%;
  padding-top: 80px;
  @include flex-column;
  align-items: center;
  gap: 16px;
  --svg-size: 32px;
  ---text-size: 14px;
  transition: all 0.3s ease-in-out;
}
.ai__ppt_loading--small {
  padding: 15px 0 0 0;
  @include flex-center;
  flex-direction: row;
  gap: 8px;
  box-sizing: border-box;
  --svg-size: 14px;
  ---text-size: 12px;
}
.ai__ppt_loading--normal {
  padding: 15px 0 0 0;
  @include flex-center;
  flex-direction: row;
  gap: 8px;
  box-sizing: border-box;
  --svg-size: 16px;
  ---text-size: 14px;
}
.loading__svg {
  animation: rotate 2.4s linear infinite;
  transform-origin: center center;
  font-size: var(--svg-size);
}
.loading__text {
  font-size: var(---text-size);
}
@keyframes rotate {
  0% {
    transform-origin: center center;
    transform: rotate(0deg);
  }
  100% {
    transform-origin: center center;
    transform: rotate(360deg);
  }
}
</style>
